<template>
  <view class="modify-personal">
    <!-- 头像选择区域 -->
    <view class="avatar-section">
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
      </button>
      <text class="avatar-tip">点击更换头像</text>
    </view>

    <!-- 昵称输入区域 -->
    <view class="nickname-section">
      <view class="input-group">
        <text class="input-label">设置昵称</text>
        <input type="nickname" class="nickname-input" placeholder="请输入昵称" v-model="nickname" @input="onNicknameInput" />
      </view>
    </view>

    <!-- 修改按钮 -->
    <view class="button-section">
      <button class="modify-btn" @tap="onModify">修改</button>
    </view>
  </view>
</template>

<script>
import config from '../../config'
import Taro from '@tarojs/taro'
export default {
  name: 'ModifyPersonal',
  data() {
    return {
      avatarUrl: '', // 默认头像
      nickname: '',
      token: ''// 用户token
    }
  },
  onLoad() {
    // 页面加载时获取当前用户信息
    this.getUserInfo();
  },
  created() {
    const token = Taro.getStorageSync('token');
    if (token) {
      this.token = token;
    }
  },
  methods: {

    // 选择头像
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      this.avatarUrl = avatarUrl

    },

    // 昵称输入
    onNicknameInput(e) {
      this.nickname = e.detail.value
    },
    //判断是否存在token
    // 获取用户信息（后台获取）
    async getUserInfo() {
      try {
        if (!this.token) {
          console.error('token不存在')
          return
        }

        const response = await config.wxPromisify(wx.request)({
          url: `${config.apiUrl}/login/secure/getUserInfo`,
          method: 'GET',
          header: {
            'content-type': 'application/json',
            'Authorization': `${this.token}`
          }
        })
        if (response.data.code === '0') {
          this.avatarUrl = response.data.data.avatarUrl;
          this.nickname = response.data.data.nickName;
        } else {
          Taro.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        Taro.showToast({
          title: '请求失败，请稍后再试',
          icon: 'none'
        })
      }
    },

    // 修改按钮点击事件
    onModify() {
      if (!this.nickname.trim()) {
        Taro.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }

      // 这里可以调用API保存用户信息
      Taro.showLoading({
        title: '修改中...'
      })

      // 模拟API调用
      setTimeout(async () => {
        const response = await config.wxPromisify(wx.request)({
          url: `${config.apiUrl}/login/secure/saveInfo`,
          method: 'POST',
          header: {
            'content-type': 'application/json',
            'Authorization': `${this.token}`
          },
          data: {
            'nickName': this.nickname,
            'avatarUrl': this.avatarUrl
          }
        })
        console.log('保存用户信息成功:', response)
        if (response.data.code === '0') {
          Taro.setStorageSync('userInfo', {
            'nickName': this.nickname,
            'avatarUrl': this.avatarUrl
          }),
            Taro.showToast({
              title: '修改成功',
              icon: 'success'
            })
          // 通知个人中心刷新
          Taro.eventCenter.trigger('userInfoUpdated')
        } else {
          Taro.showToast({
            title: '修改失败',
            icon: 'none'
          })
        }
        Taro.hideLoading()
        // 返回上一页
        Taro.navigateBack()
      }, 1000)
    }
  }
}
</script>

<style>
.modify-personal {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

/* 头像区域样式 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.avatar-wrapper {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.avatar-wrapper::after {
  border: none;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-tip {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 昵称输入区域样式 */
.nickname-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.nickname-input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 30rpx;
  color: #333;
  background-color: #fafafa;
}

.nickname-input:focus {
  border-color: #007aff;
  background-color: #fff;
}

/* 按钮区域样式 */
.button-section {
  padding: 0 20rpx;
}

.modify-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #007aff, #0056cc);
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
}

.modify-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.modify-btn::after {
  border: none;
}
</style>
